import React, { Component } from 'react';
import { withRouter, Link, Switch, Route } from 'react-router-dom'
import { Tabs, Icon, Menu, Dropdown, Modal, message } from 'antd';
import Loading from "./../loading"
import moment from 'moment';

import "./../../static/specialMonitoring/topic.styl"
import u from "../../common";
import $ from "jquery"

const TabPane = Tabs.TabPane;
const confirm = Modal.confirm;

export default class Topic extends React.Component {
  state = {
    lists: [],
    monitoring: [],
    inValid: [],
    index: 0,
    subscript: -1,
    visible1: false,
    visible2: false
  };

  goRouter(d) {
    this.props.history.push(d)
  }

  callback(key) {
  }

  showInvalid = () => {
    this.setState({
      visible1: true,
    });
  };
  hideInvalid = () => {
    this.setState({
      visible1: false,
    });
  };
  showDelete = () => {
    this.setState({
      visible2: true,
    });
  };
  hideDelete = () => {
    this.setState({
      visible2: false,
    });
  };

  // 添加专题的高度
  topicHeight() {
    let heightT = $(".topicStyle").height();
    if (heightT === undefined) {
      $(".addTopic").height($(".addTopic").width() * 0.87);
    }
    $(".addTopic").height(heightT);
    $(window).resize(function () {
      heightT = $(".topicStyle").height();
      if (heightT === undefined) {
        $(".addTopic").height($(".addTopic").width() * 0.87);
      }
      $(".addTopic").height($(".topicStyle").height());
      $(".addTopic>span").css("top", "calc(50% - 57px)");
    })
  }

  // 显示专题列表
  topicList = async () => {
    u.topicList(data => {
      if (data.message !== undefined) {
        message.error(data.message);
      }
      if (data.length > 0) {
        var lists2 = [], lists3 = [];
        for (var i = 0; i < data.length; i++) {
          if (data[i].isValid) {
            lists2.push(data[i])
          } else {
            lists3.push(data[i])
          }
        }
        this.setState(prevState => ({
          lists: data,
          monitoring: lists2,
          inValid: lists3,
        }));
      }
    });
  };
  // 删除专题
  deleteTopics = async () => {
    u.deleteTopic({
      ids: this.state.index.toString()
    }, data => {
      if (data.statusCode === 200) {
        message.success("删除成功");
        this.state.lists.splice(this.state.subscript, 1);
        var lists2 = [], lists3 = [];
        for (var i = 0; i < this.state.lists.length; i++) {
          if (this.state.lists[i].isValid) {
            lists2.push(this.state.lists[i])
          } else {
            lists3.push(this.state.lists[i])
          }
        }
        this.setState(prevState => ({
          monitoring: lists2,
          inValid: lists3,
        }));
      } else {
        message.error(data.message);
      }
      this.setState({
        visible2: false,
      });
    })
  };
  // 作废专题
  obsoleteTopics = async () => {
    let that = this;
    u.modifyTopic({
      id: this.state.index,
      startTime: moment().add(-2, 'days').format('YYYY-MM-DD HH:mm:ss'),
      endTime: moment().add(-1, 'days').format('YYYY-MM-DD HH:mm:ss'),
    }, data => {
      if (data.statusCode === 200) {
        message.success("作废成功");
        let arr = that.state.lists.slice(0);
        arr[that.state.subscript].isValid = false;
        var lists2 = [], lists3 = [];
        for (var i = 0; i < arr.length; i++) {
          if (arr[i].isValid) {
            lists2.push(arr[i])
          } else {
            lists3.push(arr[i])
          }
        }
        that.setState((prevState) => ({
          lists: arr,
          monitoring: lists2,
          inValid: lists3,
        }))
      } else {
        message.error(data.message);
      }
      this.setState({
        visible1: false,
      });
    })
  };

  componentDidMount() {
    this.topicHeight();
    this.topicList();
  }

  onRedact(id) {
    this.props.history.push('/topicDetail?index=' + id + "&key=" + 3)
  }

  render() {
    const menu = (
      <Menu className="tm-tips">
        <Menu.Item>
          <Link to={'/topicDetail?index=' + this.state.index + "&key=" + 3}>编辑</Link>
        </Menu.Item>
        <Menu.Item onClick={this.showInvalid}>
          作废
        </Menu.Item>
        <Menu.Item onClick={this.showDelete}>
          删除
        </Menu.Item>
      </Menu>
    );
    const menu2 = (
      <Menu className="tm-tips">
        <Menu.Item>
          <Link to={'/topicDetail?index=' + this.state.index + "&key=" + 3}>编辑</Link>
        </Menu.Item>
        <Menu.Item onClick={this.showDelete}>
          删除
        </Menu.Item>
      </Menu>
    );
    return (
      <div onLoad={this.topicHeight} style={{ height: "100%" }}>
        <Loading />
        <div className="topicList">
          <Modal
            title="作废"
            visible={this.state.visible1}
            onOk={this.obsoleteTopics}
            onCancel={this.hideInvalid}
            okText="确认"
            cancelText="取消"
          >
            <p style={{ color: "#787878", fontSize: 18, marginBottom: 30 }}>
              <Icon type="exclamation-circle" style={{ color: "#ffbf00", fontSize: 24, marginRight: 10 }} />
              你确定要将这个专题作废吗？
            </p>
          </Modal>
          <Modal
            title="删除"
            visible={this.state.visible2}
            onOk={this.deleteTopics}
            onCancel={this.hideDelete}
            okText="确认"
            cancelText="取消"
          >
            <p style={{ color: "#f25f54", fontSize: 18, marginBottom: 30 }}>
              <Icon type="close-circle" style={{ color: "#f04134", fontSize: 24, marginRight: 10 }} />
              这是一个重要的专题，你确定要删除吗？
            </p>
          </Modal>
          <Tabs defaultActiveKey="1" onChange={this.callback}>
            <TabPane tab="全部" key="1">
              {
                this.state.lists.length > 0 ?
                  this.state.lists.map((item, i) => {
                    return <div className="topicStyle" key={i} onMouseOver={() => {
                      this.setState({ index: item.id })
                    }}>
                      <div className="topImg">
                        {
                          item.isValid === true ?
                            <Link to={'/topicDetail?index=' + item.id + "&key=" + 1}>
                              <img src={require("./../../static/image/state_testing2.png")} alt="" /></Link> :
                            <img src={require("./../../static/image/state_invalid2.png")} alt="" />
                        }
                      </div>
                      <div className='topic-add'>
                        <div className='topic-left'>1</div>
                        <div className='topic-right'>
                          <div className='right-top'>
                          {
                            item.isValid === true ? <img src={require('../../static/image/jiance.png')} />:
                            <img src={require('../../static/image/shixiao.png')} />
                          }
                            
                          </div>
                          {
                            item.isValid === true ?
                            <div className='right-bottom'>
                               监测中
                            </div>:
                            <div className='right-bottom shixiaoBottom'>
                              失效
                            </div>
                          }
                        </div>
                      </div>
                      <div className='topic-bottom'>
                        <div onClick={this.onRedact.bind(this,item.id)} className='bottomStyle'>
                          <img className='bottom_img' src={require('../../static/image/bianji.png')}/>编辑
                        </div>
                        {
                          item.isValid === true ?
                          <div onClick={this.showInvalid} className='bottomStyle'>
                            <div className='bottom-center'>
                              <img className='bottom_img' src={require('../../static/image/shixiao2.png')}/>失效
                            </div>
                          </div>:
                          <div className='bottomStyle'>
                            <div className='bottom-center'>
                              <img className='bottom_img' src={require('../../static/image/huifu.png')}/>恢复
                            </div>
                          </div>
                        }
                        
                        <div onClick={this.showDelete} className='bottomStyle'>
                          <img className='bottom_img' src={require('../../static/image/del.png')}/>删除
                        </div>
                      </div>
                    </div>
                  }) : ""
              }
              <div className="addTopic" onClick={() => this.goRouter("/addTopic")}>
                <span>
                  <Icon type="plus" style={{ fontSize: 90 }} /><br />
                  新增专题
                </span>
              </div>
            </TabPane>
            <TabPane tab="监测中" key="2">
              <div style={{ marginLeft: 32, width: "100%" }}>
                {
                  this.state.monitoring.length > 0 ?
                    this.state.monitoring.map((item, i) => {
                      return <div className="topicStyle" key={i}>
                        <div className="topImg">
                          <Link to={'/topicDetail?index=' + item.id + "&key=" + 1}>
                            <img src={require("./../../static/image/state_testing2.png")} alt="" />
                          </Link>
                        </div>
                        <div className='topic-add'>
                          <div className='topic-left'>1</div>
                          <div className='topic-right'>
                          <div className='right-top'>
                            <img src={require('../../static/image/jiance.png')} />
                          </div>
                          <div className='right-bottom'>
                            监测中
                          </div>
                        </div>
                        </div>
                        <div className='topic-bottom'>
                        <div onClick={this.onRedact.bind(this,item.id)} className='bottomStyle'>
                          <img className='bottom_img' src={require('../../static/image/bianji.png')}/>编辑
                        </div>
                        {
                          item.isValid === true ?
                          <div onClick={this.showInvalid} className='bottomStyle'>
                            <div className='bottom-center'>
                              <img className='bottom_img' src={require('../../static/image/shixiao2.png')}/>失效
                            </div>
                          </div>:
                          <div className='bottomStyle'>
                            <div className='bottom-center'>
                              <img className='bottom_img' src={require('../../static/image/huifu.png')}/>恢复
                            </div>
                          </div>
                        }
                        
                        <div onClick={this.showDelete} className='bottomStyle'>
                          <img className='bottom_img' src={require('../../static/image/del.png')}/>删除
                        </div>
                      </div>
                    </div>
                  }) : ""
                }
              </div>
            </TabPane>
            <TabPane tab="失效" key="3">
              <div style={{ marginLeft: 65, width: "100%" }}>
                {
                  this.state.inValid.length > 0 ?
                    this.state.inValid.map((item, i) => {
                      return <div className="topicStyle" key={i}>
                        <div className="topImg">
                          <img src={require("./../../static/image/state_invalid2.png")} alt="" />
                        </div>
                        <div className='topic-add'>
                          <div className='topic-left'>1</div>
                          <div className='topic-right'>
                            <div className='right-top'>
                              <img src={require('../../static/image/shixiao.png')} />
                            </div>
                            <div className='right-bottom'>
                              失效
                            </div>
                          </div>
                        </div>
                        <div className='topic-bottom'>
                        <div onClick={this.onRedact.bind(this,item.id)} className='bottomStyle'>
                          <img className='bottom_img' src={require('../../static/image/bianji.png')}/>编辑
                        </div>
                        {
                          item.isValid === true ?
                          <div onClick={this.showInvalid} className='bottomStyle'>
                            <div className='bottom-center'>
                              <img className='bottom_img' src={require('../../static/image/shixiao2.png')}/>失效
                            </div>
                          </div>:
                          <div className='bottomStyle'>
                            <div className='bottom-center'>
                              <img className='bottom_img' src={require('../../static/image/huifu.png')}/>恢复
                            </div>
                          </div>
                        }
                        
                        <div onClick={this.showDelete} className='bottomStyle'>
                          <img className='bottom_img' src={require('../../static/image/del.png')}/>删除
                        </div>
                      </div>
                    </div>
                  }) : ""
                }
              </div>
            </TabPane>
          </Tabs>
        </div>
      </div>
    );
  }
}